<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hello{
            width: 100px;
            height: 200px;
            background: pink;
        }
        .world{
            font-size: 20px;
            font-weight: bold;
            color: #f00;
        }
        .welcome{
            text-decoration: underline;
        }
    </style>
    <script>
        function doProperty(){
            // let obj = document.getElementById('baidu');
            // let obj = document.getElementById('username');
            let obj = document.getElementById('male');

            // 获取属性
            // console.log(obj.href);
            // console.log(obj.target);
            // console.log(obj.value);
            // console.log(obj.checked); // 返回true或false

            // 设置属性
            // obj.href="http://www.qq.com"
            // obj.target="_self"
            // obj.value='汤小洋'
            obj.checked = true
        }
    
        function doContent() {
            var obj = document.getElementById('mydiv')

            // 获取内容
            // console.log(obj.innerHTML);
            // console.log(obj.innerText);

            // 设置内容
            // obj.innerHTML = '<h2>哈哈哈哈</h2>'
            obj.innerText = '<h2>哈哈哈哈</h2>'
        }
    
        function doStyle() {
            let obj = document.getElementById('mydiv')

            // 获取样式
            // console.log(obj.style.width);
            // console.log(obj.style.background);
            // console.log(obj.style.fontSize);

            // console.log(obj.className);

            // console.log(obj.classList);


            // 设置样式
            // obj.style.background='pink'

            // obj.className='world'

            // obj.classList.add('welcome')
            obj.classList.remove('hello')
        }
    </script>
</head>
<body>
    <button onclick="doProperty()">访问属性</button>
    <button onclick="doContent()">访问内容</button>
    <button onclick="doStyle()">访问样式</button>
    <hr>

    <a href="https://www.baidu.com" target="_blank" id="baidu">点我</a> <br>
    用户名：<input type="text" id="username" value="tom"> <br>
    性别：<input type="radio" name="sex" id="male" value="male" checked> 男
         <input type="radio" name="sex" id="female" value="female"> 女 <br>
    <br>

    <!--<div id="mydiv" style="width: 200px;height: 100px;background: #ccc;font-size: 20px;">-->
    <div id="mydiv" class="hello world">
        <p>
            111111
        </p>
    </div>

</body>
</html>